<template>
  <view class="contentbox" :style="'height:'+headHeight+'px;'">
    <view class="container" :style="'height:'+navBarHeight+'px;top:'+imageTop+'px;'" @click="goBack">
      <image :src="imageUrl +'left2.png'" mode="widthFix" class="logo"></image>
    </view>
    <view class="row-login">
      <image class="order-bg" mode="widthFix" :src="imageUrl +'list/log-bg.jpg'"></image>
      <view class="wp">
        <view class="m-login">
          <image class="logo" mode="widthFix" :src="imageUrl +'list/log-logo.png'"></image>
          <view class="txt" style="visibility: hidden;">
            <view class="tit">
              本机号码
            </view>
            <view class="num">
              185****4455
            </view>
            <view class="info">
              认证服务由中国移动提供
            </view>
          </view>
          <!--<button class="btn" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">-->
          <!--  使用微信手机号注册-->
          <!--</button>-->
          <view style="display: flex; justify-content: center; align-items: center;">
            <u-button text="微信手机号注册" type="primary" shape="circle"
                      open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></u-button>
            <u-button text="其他手机号注册" type="success" shape="circle" @click="byPhone"></u-button>
          </view>
          <view class="checkbox" style="margin-top: 40rpx;">
            <label>
              <checkbox-group @change="onChange">
                <checkbox :checked="state" color="#fff" style="transform:scale(0.7)"/>
              </checkbox-group>
              <view class="right">
                我已阅读并同意
                <view @click="goNext('/pages/privacyProtection/privacyProtection')" class="a">
                  《用户隐私服务条款》
                </view>
                和
                <view @click="goNext('/pages/helpInstructions/helpInstructions')" class="a">《服务条款》</view>
                ，若手机号未注册将为您注册账户。
              </view>
            </label>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {post} from "../../api/myHttps";

export default {
  data() {
    return {
      headHeight: 0,
      navBarHeight: 0,
      imageTop: 0,
      right: 0,

      state: false,
    }
  },
  onLoad() {
    // 获取胶囊按钮位置
    // 获取系统信息（主要是状态栏高度）
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    const systemInfo = uni.getSystemInfoSync();

    // 计算顶部总高度：从屏幕顶部到导航栏底部的距离
    const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
    const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2; // 导航栏高度
    const totalTopHeight = statusBarHeight + navBarHeight; // 顶部总高度（含状态栏+导航栏）

    console.log('状态栏高度:', statusBarHeight);
    console.log('胶囊按钮信息:', menuButtonInfo);
    console.log('导航栏高度:', navBarHeight);
    console.log('顶部总高度:', totalTopHeight);
    this.headHeight = totalTopHeight
    this.navBarHeight = menuButtonInfo.height
    this.imageTop = menuButtonInfo.top
    this.right = menuButtonInfo.width + 20
  },
  methods: {
    byPhone() {
      uni.navigateTo({
        url: '/pages/login/login2'
      })
    },
    onChange() {
      this.state = !this.state;
    },
    goNext(uri) {
      uni.navigateTo({
        url: uri
      })
    },
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    getPhoneNumber(e) {
      console.log(this.state)
      if (!this.state) {
        uni.showToast({
          title: '请同意用户隐私服务条款',
          icon: 'none'
        })
        return
      }
      post('/city-mobile/eulbPhone', {
        code: e.detail.code,
        ownerId: uni.getStorageSync("ownerId"),
        appId: uni.getAccountInfoSync().miniProgram.appId,
      }).then((res) => {
        uni.setStorageSync("phone", res.phone);
        uni.reLaunch({
          url: '/pages/index/index'
        })
      })
    }
  }
}
</script>

<style lang="scss">

.contentbox {
  width: 750rpx;
  position: relative;
  z-index: 999;

  .container {
    width: 750rpx;
    position: absolute;
    bottom: 0rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 86rpx;

    .title-names {
      width: 750rpx;
      position: absolute;
      text-align: center;
    }

    .logo {
      margin-left: 18rpx;
      width: 40rpx;
      height: 40rpx;
      position: relative;
      z-index: 9999;
    }

    .seandcode {
      width: 64rpx;
      height: 64rpx;
      position: relative;
      z-index: 9999;
    }
  }
}

/deep/ .uni-checkbox-input.uni-checkbox-input-checked {
  border-color: transparent !important;
  background: linear-gradient(98.86deg, #00BBFF 0%, #5ADA7A 100%) !important;
}

/deep/ .wx-checkbox-input.wx-checkbox-input-checked {
  border-color: transparent !important;
  background: linear-gradient(98.86deg, #00BBFF 0%, #5ADA7A 100%) !important;

}

/deep/ .uni-checkbox-input {
  /* width: 32rpx!important;
  height: 32rpx!important; */
  border-radius: 50% !important;
  overflow: hidden !important;
}

/deep/ .wx-checkbox-input {
  /* width: 32rpx!important;
  height: 32rpx!important; */
  border-radius: 50% !important;
  overflow: hidden !important;

}
</style>
